<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>WxVideo</title>
		<meta http-equiv="expires" content="-1">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="cache-control" content="no-cache, no-store,  must-revalidate">
		<meta http-equiv="expires" content="-1">
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}
			
			html,
			body {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
				-webkit-user-select: none;
				user-select: none;
				overflow: hidden;
			}
			
			#videobox {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				overflow: hidden;
			}
			
			#videobox1 {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				overflow: hidden;
			}
			
			#mainvideo {
				width: 1px;
				display: blcok;
			}
			
			#mainvideo1 {
				width: 1px;
				display: block;
			}
			
			#btn {
				display: block;
				position: absolute;
				width: 100px;
				height: 100px;
				top: 0px;
				right: 0px;
				bottom: 0px;
				left: 0px;
				margin: auto;
			}
			#interacation{
				background-color: aliceblue;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
			}
			#target{
				width: 100px;
				height:100px;
				background-color: blanchedalmond;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -50px;
				margin-top: -50px;
			}
			#box{
				width: 50px;
				height: 50px;
				position: absolute;
				background-color: red;
				z-index: 10;
			}
		</style>
	</head>

	<body>
		<div id="videobox">
			<video ontouchmove="return false;" style="position: absolute;" id="mainvideo" src="http://wucaivideo.oss-cn-beijing.aliyuncs.com/video.mp4" x5-playsinline="" playsinline="" webkit-playsinline="" x5-video-player-type='h5' x5-video-player-fullscreen='true' poster="" preload="auto">
			</video>
		</div>
		<div id="interacation" style="display: none;">
			<div id="box">
				
			</div>
			<div id="target">
				
			</div>
		</div>
		<div id="videobox1" style="display: none;">
			<video " ontouchmove="return false; " id="mainvideo1" src="http://wucaivideo.oss-cn-beijing.aliyuncs.com/video.mp4" x5-playsinline=" " playsinline=" " webkit-playsinline=" " x5-video-player-type='h5' x5-video-player-fullscreen='true' poster=" " preload="auto ">
		</video>
		</div>
		<script src="lib/jquery-2.1.4.min.js " type="text/javascript " charset="utf-8 "></script>
		<script src="lib/hammer.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hammer.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript ">
		   var initnteracation = function(){
		   var game = new panTarget("#box", "#target", "#interacation", function(data) {
				if(data){
					$("#videobox1").show();
					$("#interacation").hide();
					boundVideoEvent("#videobox1","#mainvideo1", function(data){
						if(data.type=="ended"){
						};
					});
					$("#videobox1").trigger("click");
				}
			});
			game.init();
		   }
			var VideoControl = function(vi,end) {
				this.vi = $(vi)[0];
				this.play = function() {
					this.vi.play();
				};
			this.vi.addEventListener("ended",function(data){
        		 	end(data)
  			});
			};
			var setVideoStyle = function (video){
			    $(video)[0].style.width = '100%';
			 }
			
			var boundVideoEvent = function(box,video,callback){
				$(box).on("click ", function() {
				var videoCon = new VideoControl(video,function(data){
					callback(data);
				});
				videoCon.play();
				setVideoStyle(video);
			});
			}
			boundVideoEvent("#videobox","#mainvideo", function(data){
				if(data.type=="ended"){
					$("#videobox").hide();
					$("#interacation").show();
					initnteracation();
				};
			});
			
		</script>
	</body>

</html>